<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:body>
        <ui:composition template="./templates/template.xhtml">

            <ui:define name="resources">

            </ui:define>

            <ui:define name="content">    

                <div id="_title">
                    CONTACT
                </div>

                <iframe  width="100%" height="350" frameborder="0" scrolling="no"
                         marginheight="0" marginwidth="0" 
                         src="map.html">

                </iframe>

                <br/>
                <br/>
                <style>

                    #contact_detai_2 {
                        float: left;
                        width: 350px;     
                        margin-top: 10px;
                        margin-left:20px
                    }
                    #contact_detai_1{
                        float: left;
                        width: 550px;
                        padding: 10px;
                        margin: 10px;
                        border:  1px solid #C7E5F4;
                        border-radius: 3px;
                        background-color: #fff;
                    }
                    .ui-panel {
                        padding: 0;
                    }

                    .ui-panel .ui-panel-content {
                        background-color: #FDFDFD;
                        border: 0 none;
                        padding: 0 ;
                    }
                    .ui-corner-all {
                        border-radius: 3px 3px 0 0;
                        border:  1px solid #C7E5F4;
                    }


                    div.contact ul li {
                        margin-bottom: 5px;
                        padding-left: 22px;
                        background-position: 2px 8px;
                        min-height: 20px;
                    }

                    ul li.address {
                        background: url("./images/icons/icon-home.png") no-repeat scroll 0 6px transparent !important;
                    }

                    ul li.email {
                        background: url("./images/icons/icon-email.png") no-repeat scroll 0 6px transparent !important;
                    }

                    ul li.phone {
                        background: url("./images/icons/icon-mobile.png") no-repeat scroll 0 6px transparent !important;
                    }

                    ul li.skype {
                        background: url("./images/icons/icon-reply.png") no-repeat scroll 0 6px transparent !important;
                    }
                </style>

                <div id="contact_detai_1">
                    <div>
                        Your Name: <h:inputText/>
                    </div>
                    <p:spacer height="5px"/>
                    <div>
                        Phone: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <h:inputText/>
                    </div>
                    <p:spacer height="5px"/>
                    <div>
                        Your Email: <h:inputText/>
                    </div>
                    <p:spacer height="5px"/>
                    <div>
                        Subject: &nbsp;&nbsp;&nbsp; <h:inputText/>
                    </div>
                    <p:spacer height="5px"/>
                    <div>
                        <p:panel header="Mesage: ">
                            <h:inputTextarea style="height: 100px; padding: 8px;  background-color: #F4F4F4;
                                             width: 530px; border: none;"/>
                        </p:panel>
                    </div>
                    <p:spacer height="5px"/>
                    <div>
                        <p:button value="send"/>
                    </div>


                </div>
                <div id="contact_detai_2">
                    <div class="contact" style="background: none repeat scroll 0 0 transparent;
                         border: 0 none;
                         font-size: 100%;
                         margin: 0;
                         outline: 0 none;
                         padding: 0;">
                        <ul style=" list-style: none outside none;">
                            <li class="address"><strong>Address: </strong><span>DMA Co., Ltd<br/>380/13B Nam Ky Khoi Nghia, Ward 8, Dist 3, Ho Chi Minh City, Vietnam</span></li>
                            <li class="email"><strong>Email: </strong><a href="mailto:info@dma.vn">info@dma.vn</a> </li>
                            <li class="phone"><strong>Phone: </strong>(+84) (8) 43 64 59 </li>
                            <li class="skype"><strong>Fax: </strong><strong> </strong>(+84) (8) xx xx xx </li>
                        </ul>
                    </div>

                </div>



            </ui:define>
        </ui:composition>
    </h:body>
</html>

